<div class="newsletter-search-wrapper">
    <div class="menu-wrapper">
        <div id="category-menu" class="toggleMenu">Danh mục sản phẩm</div>
        <?php
			include_once("service/categoryService.php");
			// show the menu in index page and hide it in others
			$url = basename($_SERVER['PHP_SELF']);
			$isIndex = false;
			if($url == "index.php" || $url == "") $isIndex = true;
			
			function buildSubmenu($parentId){
				$childCategories = getAllChildrenOfCategory($parentId);
				if(ConnectionManager::getInstance()->getNumRows() > 0) echo "<ul>";
				
				while($childCate = ConnectionManager::getInstance()->fetch($childCategories)){
					echo "<li>";
					echo "<a id='cat-".$childCate["CAT_ID"]."'".generateClssClass($childCate["CAT_ID"])." href='product.php?c=".$childCate["CAT_ID"]."'>".$childCate["CAT_NAME"]."</a>";
					if(hasChild($childCate["CAT_ID"])) buildSubmenu($childCate["CAT_ID"]);
					echo "</li>";
				}
				
				if(ConnectionManager::getInstance()->getNumRows() > 0) echo "</ul>";	
			} 
			
			function buildMenu(){				
				$rootCategories = getAllRootCategory();
				while($rootCate = ConnectionManager::getInstance()->fetch($rootCategories)){
					echo "<li>";
					if(hasChild($rootCate["CAT_ID"])){
						echo "<a id='cat-".$rootCate["CAT_ID"]."' ".generateClssClass($rootCate["CAT_ID"])." href='#'>".$rootCate["CAT_NAME"]."</a>";
					} else {
						echo "<a id='cat-".$rootCate["CAT_ID"]."' ".generateClssClass($rootCate["CAT_ID"])." href='product.php?c=".$rootCate["CAT_ID"]."'>".$rootCate["CAT_NAME"]."</a>";
					}
					buildSubmenu($rootCate["CAT_ID"]);
					echo "</li>";
				}
			}
			
			function generateClssClass($catId){
				if(isset($_GET["c"]) && $_GET["c"] == $catId){
					return "class=\"active\"";
				}
				return "";
			}
			
			//display all parents of selected menu item
			function displayParents(){
				if(isset($_GET["c"])){
					$catId = $_GET["c"];
					$parents = getAllParentCategoriesOf($catId, null);
					foreach($parents as $each){
						echo "<script>$('#cat-".$each["id"]."').addClass('active');</script>";
					}
				}
			}
        ?>
        
        <ul class="menu">
            <?php buildMenu();?>
        </ul>
       	        
        <?php
			displayParents();
        	if($isIndex) echo "<script>$('.toggleMenu').toggleClass('active');$('.menu').toggle();</script>";
        ?>
    </div>
    <form id="form">
    	<div class="formError">
        	<div class="formErrorContent"></div>
            <div class="formErrorArrow">
            	<div class="line10"></div>
                <div class="line9"></div>
                <div class="line8"></div>
                <div class="line7"></div>
                <div class="line6"></div>
                <div class="line5"></div>
                <div class="line4"></div>
                <div class="line3"></div>
                <div class="line2"></div>
                <div class="line1"></div>
            </div>
        </div>
        <div class="email-subscription-wrapper">
            <input type="text" class="email-subscription" id="email-subscription" name="email" placeholder="Nhập email đăng ký giá tốt hàng ngày"/>
            <div class="security-code">
            	<div class="control-block">
                    <label class="control-label w120">Mã xác nhận</label>
                    <img src="./util/captcha/generateImage.php" alt="security code" border="1" />
                </div>
            	<div class="control-block">
                    <label class="control-label w120">Nhập mã xác nhận</label>
                    <input type="text" name="secCode" class="w85"/>
                    
                </div>
                <div class="control-block">
                    <input type="button" value="GỬI" class="send-email-btn" onclick="sendEmail();"/>
                    <input type="button" value="Đóng" class="send-email-btn" onclick="closeEmailSubscription();"/>
                </div>
            </div>
        </div>
    </form>
    <form method="post" action="./search.php" class="search-form">
        <div class="controls">
        	<div class="input-append">
                <input type="text" placeholder="Nhập sản phẩm muốn tìm kiếm" class="w230">
                <button class="btn search-btn" type="submit"></button>
            </div>
            <!--<input id="keyword" name="keyword" type="text" class="search" placeholder="Nhập sản phẩm muốn tìm kiếm"/>-->
        </div>
    </form>
    <script>
		function closeEmailSubscription(){
			$("input[name='email']").val('');
			$('.security-code').fadeOut(500);
		}
		
		function sendEmail(){
			if(validate()){
				$.ajax({
					type: "POST",
					url: "./action/ajax/sendEmailSubscriptionProcess.php",
					data: { email : $("#email-subscription").val(), secCode : $("input[name^=secCode]").val() }
				}).done(function( data ) {
					if(data == 1) {
						$('.security-code').fadeOut(1);
						$("#email-subscription").attr("placeholder", "Cám ơn bạn đã đăng ký");
						setTimeout(function() { 
							$("#email-subscription").attr("placeholder", "Nhập email đăng ký giá tốt hằng ngày"); 
						}, 5000);
						$("#email-subscription").val("");
					} else if(data == 3){
						$(".formError").addClass("active top50");
						setTimeout(function() { 
							$('div.formError').fadeOut(3000); 
							$(".formError").removeClass("active"); 
						}, 3000);
						$(".formError").removeAttr("style");
						$(".formErrorContent").html("Sai mã xác nhận");
					}
					$("input[name='secCode']").val('');
				});
			}
		}
		
		function validate(){
			var emailPattern = new RegExp(/^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?$/i);
			
			var email = $("#email-subscription").val();
			var msg = "";
			
		    if(!emailPattern.test(email)){
				$(".formError").addClass("active top-35");
				setTimeout(function() { 
					$('div.formError').fadeOut(3000); 
					$(".formError").removeClass("active"); 
				}, 3000);
				$(".formError").removeAttr("style");
				msg += "Sai định dạng email";
				$(".formErrorContent").html(msg);
				return false;
			}
			 
			return true;
		}
    </script>
</div>